<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>树形数据格式化展示</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f7fa;
            padding: 20px;
        }
        .container {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
            gap: 20px;
        }
        .input-section {
            flex: 1;
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .output-section {
            flex: 1;
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #2c3e50;
        }
        h2 {
            margin-bottom: 15px;
            color: #3498db;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }
        textarea {
            width: 100%;
            height: 300px;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: monospace;
            resize: vertical;
            margin-bottom: 15px;
        }
        .controls {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        button {
            padding: 10px 15px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        .search-box {
            display: flex;
            margin-bottom: 15px;
        }
        .search-box input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
        }
        .search-box button {
            border-radius: 0 4px 4px 0;
        }
        .tree-container {
            max-height: 600px;
            overflow-y: auto;
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 4px;
        }
        .tree-node {
            margin: 5px 0;
        }
        .node-content {
            display: flex;
            justify-content: space-between;
            padding: 8px;
            background-color: #f8f9fa;
            border-radius: 4px;
            cursor: pointer;
        }
        .node-content:hover {
            background-color: #e9ecef;
        }
        .node-name {
            flex: 1;
        }
        .node-amount {
            font-weight: bold;
            color: #27ae60;
            margin-left: 10px;
        }
        .children {
            margin-left: 30px;
            display: none;
        }
        .expanded .children {
            display: block;
        }
        .toggle-icon {
            display: inline-block;
            width: 20px;
            text-align: center;
            margin-right: 5px;
        }
        .level-1 {
            font-weight: bold;
            background-color: #e3f2fd;
        }
        .level-2 {
            background-color: #f3e5f5;
        }
        .level-3 {
            background-color: #e8f5e9;
        }
        .summary {
            font-weight: bold;
            background-color: #fff3e0;
        }
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
<h1>树形数据格式化展示</h1>

<div class="container">
    <div class="input-section">
        <h2>数据输入</h2>
        <textarea id="jsonInput" placeholder="请输入JSON数据...">
{
    "code": "000000",
    "message": "操作成功",
    "data": [
        {
            "amount": 1.90,
            "compid": "100",
            "bure_no": "ZDYH2021090027",
            "level": "1",
            "level1_count": null,
            "name": "山西焦煤集团有限责任公司",
            "coll_id": "100514",
            "nameSuffix": "山西焦煤集团有限责任公司(14)",
            "level3_count": 81,
            "id": "007464",
            "superId": "-",
            "level2_count": 14
        },
        {
            "amount": 1.76,
            "compid": "100",
            "bure_no": "ZDYH2023071100",
            "level": "1",
            "level1_count": null,
            "name": "陕西榆林能源集团有限公司",
            "coll_id": "101066",
            "nameSuffix": "陕西榆林能源集团有限公司(3)",
            "level3_count": 4,
            "id": "103649",
            "superId": "-",
            "level2_count": 3
        },
        {
            "amount": 0.00,
            "compid": "100",
            "bure_no": "ZDYH2023070602",
            "level": "3",
            "level1_count": null,
            "name": "山西煤炭进出口集团左云韩家洼煤业有限公司",
            "coll_id": "100548",
            "nameSuffix": "山西煤炭进出口集团左云韩家洼煤业有限公司",
            "level3_count": null,
            "id": "000798",
            "superId": "002060",
            "level2_count": null
        },
        {
            "amount": 0.48,
            "compid": "100",
            "bure_no": "ZDYH2023070608",
            "level": "3",
            "level1_count": null,
            "name": "山西煤炭进出口集团鹿台山煤业有限公司",
            "coll_id": "100555",
            "nameSuffix": "山西煤炭进出口集团鹿台山煤业有限公司",
            "level3_count": null,
            "id": "300555",
            "superId": "104609",
            "level2_count": null
        },
        {
            "amount": 0.40,
            "compid": "100",
            "bure_no": "ZDYH2023070603",
            "level": "3",
            "level1_count": null,
            "name": "山西煤炭进出口集团左云东古城煤业有限公司",
            "coll_id": "100549",
            "nameSuffix": "山西煤炭进出口集团左云东古城煤业有限公司",
            "level3_count": null,
            "id": "300549",
            "superId": "002060",
            "level2_count": null
        },
        {
            "amount": 1.34,
            "compid": "100",
            "bure_no": "ZDYH2023070577",
            "level": "2",
            "level1_count": null,
            "name": "山西煤炭进出口集团有限公司",
            "coll_id": "100523",
            "nameSuffix": "山西煤炭进出口集团有限公司(7)",
            "level3_count": 7,
            "id": "002060",
            "superId": "007464",
            "level2_count": null
        },
        {
            "amount": 0.02,
            "compid": "100",
            "bure_no": "ZDYH2023070577",
            "level": "3",
            "level1_count": null,
            "name": "山西煤炭进出口集团蒲县万家庄煤业有限公司",
            "coll_id": "100523",
            "nameSuffix": "山西煤炭进出口集团蒲县万家庄煤业有限公司",
            "level3_count": null,
            "id": "007340",
            "superId": "002060",
            "level2_count": null
        },
        {
            "amount": 1.76,
            "compid": "100",
            "bure_no": "ZDYH2023071100",
            "level": "2",
            "level1_count": null,
            "name": "榆林能源煤炭进出口公司",
            "coll_id": "101066",
            "nameSuffix": "榆林能源煤炭进出口公司(1)",
            "level3_count": 1,
            "id": "104661",
            "superId": "103649",
            "level2_count": null
        },
        {
            "amount": 0.01,
            "compid": "100",
            "bure_no": "ZDYH2023070589",
            "level": "3",
            "level1_count": null,
            "name": "山西煤炭进出口集团左权宏远煤业有限公司",
            "coll_id": "100535",
            "nameSuffix": "山西煤炭进出口集团左权宏远煤业有限公司",
            "level3_count": null,
            "id": "000717",
            "superId": "104609",
            "level2_count": null
        },
        {
            "amount": 0.07,
            "compid": "100",
            "bure_no": "ZDYH2023070565",
            "level": "3",
            "level1_count": null,
            "name": "山西煤炭进出口集团左权鑫顺煤业有限公司",
            "coll_id": "100510",
            "nameSuffix": "山西煤炭进出口集团左权鑫顺煤业有限公司",
            "level3_count": null,
            "id": "300510",
            "superId": "104609",
            "level2_count": null
        },
        {
            "amount": 0.88,
            "compid": "100",
            "bure_no": "ZDYH2023070541",
            "level": "3",
            "level1_count": null,
            "name": "山西煤炭进出口集团左云长春兴煤业有限公司",
            "coll_id": "100485",
            "nameSuffix": "山西煤炭进出口集团左云长春兴煤业有限公司",
            "level3_count": null,
            "id": "000783",
            "superId": "002060",
            "level2_count": null
        },
        {
            "amount": 0.03,
            "compid": "100",
            "bure_no": "ZDYH2023070597",
            "level": "3",
            "level1_count": null,
            "name": "山西煤炭进出口集团蒲县豹子沟煤业有限公司",
            "coll_id": "100543",
            "nameSuffix": "山西煤炭进出口集团蒲县豹子沟煤业有限公司",
            "level3_count": null,
            "id": "000811",
            "superId": "002060",
            "level2_count": null
        },
        {
            "amount": 0.56,
            "compid": "100",
            "bure_no": "ZDYH2023070548",
            "level": "2",
            "level1_count": null,
            "name": "山煤国际能源集团股份有限公司",
            "coll_id": "100492",
            "nameSuffix": "山煤国际能源集团股份有限公司(6)",
            "level3_count": 6,
            "id": "104609",
            "superId": "007464",
            "level2_count": null
        },
        {
            "amount": 0.00,
            "compid": "100",
            "bure_no": "ZDYH2023071099",
            "level": "2",
            "level1_count": null,
            "name": "陕西榆林能源集团有限公司",
            "coll_id": "101065",
            "nameSuffix": "陕西榆林能源集团有限公司(1)",
            "level3_count": 1,
            "id": "103649",
            "superId": "103649",
            "level2_count": null
        },
        {
            "amount": 1.76,
            "compid": "100",
            "bure_no": "ZDYH2023071100",
            "level": "3",
            "level1_count": null,
            "name": "榆林市杨伙盘煤矿",
            "coll_id": "101066",
            "nameSuffix": "榆林市杨伙盘煤矿",
            "level3_count": null,
            "id": "001541",
            "superId": "104661",
            "level2_count": null
        },
        {
            "amount": 0.00,
            "compid": "100",
            "bure_no": "ZDYH2023070616",
            "level": "3",
            "level1_count": null,
            "name": "山西煤炭进出口集团左云草垛沟煤业有限公司",
            "coll_id": "100563",
            "nameSuffix": "山西煤炭进出口集团左云草垛沟煤业有限公司",
            "level3_count": null,
            "id": "300563",
            "superId": "002060",
            "level2_count": null
        },
        {
            "amount": 3.66,
            "level1_count": 2,
            "name": "汇总",
            "coll_id": "-",
            "level3_count": 10,
            "level2_count": 4
        }
    ]
}
            </textarea>

        <div class="controls">
            <button id="formatBtn">格式化数据</button>
            <button id="expandAllBtn">全部展开</button>
            <button id="collapseAllBtn">全部折叠</button>
        </div>

        <div class="search-box">
            <input type="text" id="searchInput" placeholder="搜索节点...">
            <button id="searchBtn">搜索</button>
        </div>
    </div>

    <div class="output-section">
        <h2>树形结构展示</h2>
        <div id="treeContainer" class="tree-container">
            <div class="tree-node">请点击"格式化数据"按钮生成树形结构</div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const jsonInput = document.getElementById('jsonInput');
        const formatBtn = document.getElementById('formatBtn');
        const expandAllBtn = document.getElementById('expandAllBtn');
        const collapseAllBtn = document.getElementById('collapseAllBtn');
        const searchInput = document.getElementById('searchInput');
        const searchBtn = document.getElementById('searchBtn');
        const treeContainer = document.getElementById('treeContainer');

        let treeData = [];
        let allNodes = [];

        // 格式化数据
        formatBtn.addEventListener('click', function() {
            try {
                const jsonData = JSON.parse(jsonInput.value);
                if (jsonData.code === "000000" && jsonData.data) {
                    treeData = buildTree(jsonData.data);
                    renderTree(treeData);
                } else {
                    throw new Error("无效的JSON格式");
                }
            } catch (error) {
                alert("JSON解析错误: " + error.message);
            }
        });

        // 全部展开
        expandAllBtn.addEventListener('click', function() {
            allNodes.forEach(node => {
                node.classList.add('expanded');
            });
        });

        // 全部折叠
        collapseAllBtn.addEventListener('click', function() {
            allNodes.forEach(node => {
                node.classList.remove('expanded');
            });
        });

        // 搜索功能
        searchBtn.addEventListener('click', function() {
            const searchTerm = searchInput.value.toLowerCase().trim();
            if (!searchTerm) return;

            // 移除之前的高亮
            document.querySelectorAll('.highlight').forEach(el => {
                el.classList.remove('highlight');
            });

            // 搜索并高亮匹配的节点
            const matches = document.querySelectorAll('.node-content');
            let found = false;

            matches.forEach(node => {
                const text = node.textContent.toLowerCase();
                if (text.includes(searchTerm)) {
                    node.classList.add('highlight');
                    // 展开父节点
                    let parent = node.closest('.tree-node');
                    while (parent) {
                        parent.classList.add('expanded');
                        parent = parent.parentElement.closest('.tree-node');
                    }
                    found = true;
                }
            });

            if (!found) {
                alert("未找到匹配的节点");
            }
        });

        // 构建树形结构
        function buildTree(data) {
            const nodeMap = new Map();
            const roots = [];

            // 创建所有节点的映射
            data.forEach(item => {
                const node = {
                    id: item.id,
                    superId: item.superId,
                    name: item.name,
                    nameSuffix: item.nameSuffix,
                    amount: item.amount,
                    level: item.level,
                    level1_count: item.level1_count,
                    level2_count: item.level2_count,
                    level3_count: item.level3_count,
                    children: []
                };
                nodeMap.set(item.id, node);
            });

            // 构建树形结构
            data.forEach(item => {
                const node = nodeMap.get(item.id);
                if (item.superId === "-" || !nodeMap.has(item.superId)) {
                    roots.push(node);
                } else {
                    const parent = nodeMap.get(item.superId);
                    if (parent) {
                        parent.children.push(node);
                    }
                }
            });

            return roots;
        }

        // 渲染树形结构
        function renderTree(nodes, parentElement = treeContainer, level = 0) {
            allNodes = [];
            parentElement.innerHTML = '';

            nodes.forEach(node => {
                const treeNode = document.createElement('div');
                treeNode.className = 'tree-node';

                const nodeContent = document.createElement('div');
                nodeContent.className = `node-content level-${node.level}`;

                const displayName = node.nameSuffix ? `${node.name}(${getCountText(node)})` : node.name;

                nodeContent.innerHTML = `
                        <div class="node-name">
                            <span class="toggle-icon">${node.children.length > 0 ? '+' : ''}</span>
                            ${displayName}
                        </div>
                        <div class="node-amount">${node.amount !== undefined ? node.amount.toFixed(2) : ''}</div>
                    `;

                const childrenContainer = document.createElement('div');
                childrenContainer.className = 'children';

                if (node.children.length > 0) {
                    nodeContent.addEventListener('click', function(e) {
                        if (!e.target.classList.contains('toggle-icon')) return;
                        treeNode.classList.toggle('expanded');
                    });

                    renderTree(node.children, childrenContainer, level + 1);
                }

                treeNode.appendChild(nodeContent);
                treeNode.appendChild(childrenContainer);
                parentElement.appendChild(treeNode);
                allNodes.push(treeNode);
            });
        }

        // 获取计数文本
        function getCountText(node) {
            switch(node.level) {
                case "1":
                    return `${node.level2_count || 0} - ${node.level3_count || 0}`;
                case "2":
                    return `${node.level3_count || 0}`;
                default:
                    return "";
            }
        }
    });
</script>
</body>
</html>